{% extends theme("layout.html") %}

{% block css %}
  {{  super() }}

  <style>
  /* news posts */
  .portal-info {
      font-size:15px;
      color:#999999;
      padding: 0;
      margin-top:5px;
      margin-bottom:10px;
      margin-right: 0px;
      margin-left: 0px;
  }
  .portal-info ul {
      list-style-type:none;
  }
  .portal-info li {
      display:inline;
      padding-right:10px;
  }

  .portal-info a {
      color:#999999;
  }
  .portal-content h1,
  .portal-content h2,
  .portal-content h3,
  .portal-content h4,
  .portal-content h5 {
      font-weight:500;
  }
  .portal-content img {
      max-width:100%;
      max-height:100%;
  }

  /* recent topics */
  .portal-topic:not(:first-child) {
    padding-top: 5px;
    clear: both;
    border-top: 1px solid #ddd;
  }

  .portal-topic-name {
    float: left;
  }

  .portal-topic-updated-by {
    float: right;
  }

  .portal-topic-updated {
    color:#999999;
    clear: both;
    float: right;
  }

  /* stats */
  .portal-stats {
    color:#999999;
  }
  .portal-stats:not(:first-child) {
    padding-top: 5px;
    clear: both;
  }

  .portal-stats-left {
    float: left;
  }

  .portal-stats-right {
    float: right;
  }
  </style>
{% endblock %}

{% block content %}
<div class="row">

  <!-- Left -->
  <div class="col-md-8">
    <div class="panel panel-default panel-widget">
      <div class="panel-heading panel-widget-heading">
        <h3 class="panel-title">News</h3>
      </div>
      <div class="panel-body panel-widget-body" style="padding-top: 0px">

      {% for topic in news.items %}
        <h1><a href="{{ topic.url }}">{{ topic.title }}</a></h1>
        <ul class="portal-info">
            <li><i class="fa fa-calendar"></i> {{ topic.date_created|format_date('%b %d %Y') }}</li>
            <li><i class="fa fa-user"></i> <a href="{{ url_for('user.profile', username=topic.user.username) }}">{{ topic.user.username }}</a></li>
            <li><i class="fa fa-comment"></i> <a href="{{ topic.url }}">Comments ({{ topic.post_count }})</a></li>
        </ul>
        <div class="portal-content">
            {{ topic.first_post.content | markup | safe }}<br />
        </div>
        {% if not loop.last %}<hr>{% endif %}
      {% endfor %}

      </div> <!-- /.panel-body -->
    </div>

  </div>

  <!-- Right -->
  <div class="col-md-4">
    <div class="panel panel-default panel-widget">
      <div class="panel-heading panel-widget-heading">
        <h3 class="panel-title">Recent Topics</h3>
      </div>
      <div class="panel-body panel-widget-body">
      {% for topic in recent_topics %}

          <div class="portal-topic">
            <div class="portal-topic-name">
              <a href="{{ topic.url }}">{{ topic.title | truncate(length=45) }}</a>
            </div>
            <div class="portal-topic-updated-by">
              <a href="{{ url_for('user.profile', username=topic.user.username) }}">{{ topic.user.username }}</a>
            </div>
            <div class="portal-topic-updated">
              {{ topic.last_updated | time_since }}
            </div>
          </div> <!-- /.topic -->

      {% endfor %}
      </div>
    </div>

    <div class="panel panel-default panel-widget">
      <div class="panel-heading panel-widget-heading">
        <h3 class="panel-title">Statistics</h3>
      </div>
      <div class="panel-body panel-widget-body">

            <div class="portal-stats">
              <div class="portal-stats-left">
                Topics
              </div>
              <div class="portal-stats-right">
                {{ topic_count }}
              </div>
            </div>

            <div class="portal-stats">
              <div class="portal-stats-left">
                Posts
              </div>
              <div class="portal-stats-right">
                {{ post_count }}
              </div>
            </div>

            <div class="portal-stats">
              <div class="portal-stats-left">
                Registered Users
              </div>
              <div class="portal-stats-right">
                {{ user_count }}
              </div>
            </div>

            {% if newest_user %}
            <div class="portal-stats">
              <div class="portal-stats-left">
                Newest User
              </div>
              <div class="portal-stats-right">
                <a href="{{ newest_user.url }}">{{ newest_user.username }}</a>
              </div>
            </div>
            {% endif %}

            <div class="portal-stats">
              <div class="portal-stats-left">
                Online Users
              </div>

              <div class="portal-stats-right">
                {{ online_users }}
              </div>
            </div>

            {% if config["REDIS_ENABLED"] %}
            <div class="portal-stats">
              <div class="portal-stats-left">
                Guests online
              </div>

              <div class="portal-stats-right">
                {{ online_guests }}
              </div>
            </div>
            {% endif %}
      </div>
    </div>
  </div>

</div>
{% endblock %}
